<template>
  <view class="w-picker-view">
    <picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickerVal" @change="bindChange">
      <picker-view-column>
        <view class="w-picker-item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
      </picker-view-column>
      <picker-view-column>
        <view class="w-picker-item" v-for="(item, index) in months" :key="index">{{ item }}月</view>
      </picker-view-column>
      <picker-view-column>
        <view class="w-picker-item" v-for="(item, index) in days" :key="index">{{ item }}日</view>
      </picker-view-column>
      <picker-view-column>
        <view class="w-picker-item" v-for="(item, index) in sections" :key="index">{{ item }}</view>
      </picker-view-column>
    </picker-view>
  </view>
</template>
<script>
  export default {
    name: 'half-picker',
    props: {
      startYear: {
        type: [String, Number],
        default: '2010-01-01',
      },
      endYear: {
        type: [String, Number],
        default: '2050-12-31',
      },
      value: {
        type: [String, Number],
        default: '',
      },
      itemHeight: {
        type: String,
        default: '44px',
      },
    },
    data() {
      const baseArr = ['', '']
      return {
        date: '',
        presentTime: new Date(),
        years: baseArr,
        months: baseArr,
        days: baseArr,
        sections: ['上午', '下午'],
        minutes: baseArr,
        days28: [],
        pickerVal: [0, 0, 0, 0],
        startObj: {
          months: [],
          days: [],
        },
        endObj: {
          months: [],
          days: [],
        },
        changeDisabled: false,
        moveFlag: false,
        showCover: false,
      }
    },
    watch: {
      startYear() {
        this.setStartEnd()
        const date = this.value ? this.value : new Date()
        this.initCurr(date)
      },
      endYear() {
        this.setStartEnd()
        const date = this.value ? this.value : new Date()
        this.initCurr(date)
      },
      value(val) {
        let value = val.split(' ')
        const date = val ? val : new Date()
        this.initCurr(date)
      },
    },
    created() {
      this.days28 = this.setArray(1, 28)
      this.setStartEnd()
      const date = this.value ? this.value : new Date()
      this.initCurr(date)
      // this.$nextTick(() => {
      //   this.confirm()
      // })
    },
    methods: {
      // 当滚动选择
      bindChange(e) {
        if (this.changeDisabled) return
        this.changeDisabled = true
        const prev = this.pickerVal
        const val = e.detail.value
        const y = this.years[val[0]] ? this.years[val[0]] : this.years[this.years.length - 1]
        const m = this.months[val[1]] ? this.months[val[1]] : this.months[this.months.length - 1]
        const d = this.days[val[2]] ? this.days[val[2]] : this.days[this.days.length - 1]
        const sections = this.sections[val[3]] || this.sections[this.sections.length - 1]
        const date = `${y}-${m}-${d} ${sections}`

        this.initCurr(date, m, d)
        // if (prev[1] != val[1]) {
        //   this.initCurr(date, m, d)
        // } else {
        //   this.initCurr(date)
        // }

        // this.pickerVal = val
      },
      // 点击确定
      confirm() {
        const val = this.pickerVal
        const trimN = this.trimNum
        let date = ''
        let obj = {}
        date =
          `${this.years[val[0]]}-${trimN(this.months[val[1]])}-${trimN(this.days[val[2]])} ${this.sections[val[3]]}`
        obj = {
          year: this.years[val[0]],
          month: this.months[val[1]],
          day: this.days[val[2]],
          sections: this.sections[val[3]],
        }
        this.date = date
        this.$emit('change', {
          result: date,
          value: date,
          obj: obj,
        })
      },
      // 根据年月,设置日期(不同月份，日期不同)
      setDays(year, month, start = 1) {
        let newDays = []
        const monthReg = /^4|6|9|11$/
        let maxDay = ''
        if (monthReg.test(month)) {
          maxDay = 30
        } else if (month === 2) {
          if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
            maxDay = 29
          } else {
            maxDay = 28
          }
        } else {
          maxDay = 31
        }
        newDays = this.setArray(start, maxDay)
        return newDays
      },
      // 设置最大最小月日时分
      setStartEnd() {
        const {
          sy,
          ey,
          sm,
          em,
          sd,
          ed,
          sh,
          eh,
          sminu,
          eminu
        } = this.getSE()
        this.years = this.setArray(sy, ey)
        // 设置最大最小月
        if (sy === ey) {
          this.startObj.months = this.endObj.months = this.setArray(sm, em)
        } else {
          this.startObj.months = this.setArray(sm, 12)
          this.endObj.months = this.setArray(1, em)
        }

        // 设置最大最小日
        if (sy === ey && sm === em) {
          this.startObj.days = this.endObj.days = this.setArray(sd, ed)
        } else {
          this.startObj.days = this.setDays(sy, sm, sd)

          this.endObj.days = this.setArray(1, ed)
        }
        // 设置最大最小时
        this.startObj.sections = sh > 12 ? ['下午'] : ['上午', '下午']
        this.endObj.sections = eh > 12 ? ['上午', '下午'] : ['上午']
      },
      // 初始化选中项
      initCurr(val, month, day) {
        const {
          start,
          end,
          sy,
          ey,
          sm,
          em,
          sd,
          ed,
          sh,
          eh,
          sminu,
          eminu
        } = this.getSE()
        const {
          val: curr,
          y: cy,
          m: cm,
          d: cd,
          h: ch,
          minu: cminu,
          sections
        } = this.trimDate(val, month, day)

        let cyi = this.years.indexOf(cy)
        let cmi = 0
        let cdi = 0
        let chi = 0
        let endSIFlag = true // 是否在最后统一设置index
        if (curr.getTime() >= end.getTime()) {
          //  值大于等于结束时间
          // console.log(11)
          this.months = this.endObj.months
          this.days = this.endObj.days
          this.sections = this.endObj.sections
          cyi = this.years.length - 1
          cmi = this.months.length - 1
          cdi = this.days.length - 1
          chi = this.sections.indexOf(sections) == -1 ? 0 : this.sections.indexOf(sections)
          endSIFlag = false
        } else if (curr.getTime() <= start.getTime()) {
          // 值小于等于开始时间
          // console.log(22)
          this.months = this.startObj.months
          this.days = this.startObj.days
          this.sections = this.startObj.sections
          chi = this.sections.indexOf(sections) == -1 ? 0 : this.sections.indexOf(sections)
          cyi = cmi = cdi = 0
          endSIFlag = false
        } else if (cy === ey && cm === em && cd === ed) {
          // 值与结束时间年/月/日相同
          // console.log(111)
          this.months = this.endObj.months
          this.days = this.endObj.days
          this.sections = this.endObj.sections
          // console.log(this.sections)
        } else if (cy === ey && cm === em) {
          // 值与结束时间年、月相同
          // console.log(33)
          this.months = this.endObj.months
          this.days = this.endObj.days
          this.sections = ['上午', '下午']
        } else if (cy === ey) {
          // 值与结束时间年份相同
          // console.log(44)
          this.months = this.endObj.months
          this.days = this.setDays(cy, cm)
          this.sections = ['上午', '下午']
        } else if (cy === sy && cm === sm && cd === sd) {
          // 值与开始时间年/月/日相同
          console.log(88)
          this.months = this.startObj.months
          this.days = this.startObj.days
          this.sections = this.startObj.sections
        } else if (cy === sy && cm === sm) {
          // 值与开始时间年、月相同
          // console.log(55)
          this.months = this.startObj.months
          this.days = this.startObj.days
          this.sections = ['上午', '下午']
        } else if (cy === sy) {
          // 值与开始时间年份相同
          // console.log(66)
          this.months = this.startObj.months
          this.days = this.setDays(cy, cm)
          this.sections = ['上午', '下午']
        } else {
          // 值与开始时间、结束时间不同年月
          // console.log(77)
          this.months = this.setArray(1, 12)
          this.days = this.setDays(cy, cm)
          this.sections = ['上午', '下午']
        }
        if (endSIFlag) {
          const di = this.days.indexOf(cd)
          cmi = this.months.indexOf(cm)
          cdi = di === -1 ? this.days.length - 1 : di
          chi = this.sections.indexOf(sections) == -1 ? 0 : this.sections.indexOf(sections)
        }
        setTimeout((item) => {
          this.pickerVal = [cyi, cmi, cdi, chi, cminui]
          this.confirm()
          this.changeDisabled = false
        }, 50)
        // this.$nextTick((_) => {
        //   this.pickerVal = [cyi, cmi, cdi, chi]
        //   this.confirm()
        //   this.changeDisabled = false
        //   this.showCover = false
        // })
      },
      // 设置开始/结束时间相关变量
      getSE() {
        let s = this.startYear
        let e = this.endYear
        s = s ? s : '2010-01-01 00:00'
        e = e ? e : '2050-12-31 23:59'
        const {
          val: start,
          y: sy,
          m: sm,
          d: sd,
          h: sh,
          minu: sminu
        } = this.trimDate(s)
        const {
          val: end,
          y: ey,
          m: em,
          d: ed,
          h: eh,
          minu: eminu
        } = this.trimDate(e)
        return {
          start,
          sy,
          sm,
          sd,
          sh,
          sminu,
          end,
          ey,
          em,
          ed,
          eh,
          eminu,
        }
      },
      // 返回时间信息
      trimDate(val, month, day) {
        //检测时间格式 2050-12-31 或 2022-06-09 下午 或 2022-06-09 上午 或  2050/5/8 上午  正则匹配
        const reg = /^(\d{4})-(\d{1,2})-(\d{1,2})[\s]{0,1}([上下]{1,2}午)$/
        let curr = ''
        let sections = ''
        if (val == '现在') {
          curr = this.presentTime
        } else if (typeof val === 'string') {
          if (reg.test(val)) {
            const arr = val.split(' ')
            val = arr[0]
            sections = arr[1]
          }
          val = val.replace(/-/g, '/')
        }
        if (!curr) {
          curr = new Date(val)
        }
        if (!sections) {
          sections = curr.getHours() > 12 ? '下午' : '上午'
        }
        return {
          val: curr,
          y: curr.getFullYear(),
          m: month ? month : curr.getMonth() + 1,
          d: day ? day : curr.getDate(),
          h: curr.getHours(),
          sections: sections,
        }
      },
      // 获取一个范围内的整数，返回数组
      setArray(start, end) {
        const arr = []
        for (let i = start; i <= end; i++) {
          arr.push(i)
        }
        return arr
      },
      // 将数字转换成两位
      trimNum(num) {
        num = num >= 10 ? num : `0${num}`
        return num
      },
    },
  }
</script>

<style scoped>
  @import './w-picker.css';
</style>
